<template>
    <div>
       <div class="title">
        <van-nav-bar title="城市选择" left-arrow  @click-left="$router.back()"/>

       </div>
        <van-index-bar highlight-color="red">
            <van-index-anchor index="热门城市" />
            <van-cell v-for="(item) in popularCity"
             :key="item.short" :title="item.label" @click="queryCity(item.label)"/>
            <van-index-anchor index="A" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('a'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
            <van-index-anchor index="B" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('b'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="C" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('c'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="D" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('d'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="F" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('f'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="G" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('g'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="H" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('h'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="I" />
               <van-index-anchor index="J" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('j'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="K" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('k'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="L" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('l'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="M" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('m'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="N" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('n'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="O" />
               <van-index-anchor index="P" />
               <van-index-anchor index="Q" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('q'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="R" />
               <van-index-anchor index="S" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('s'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="T" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('t'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="U" />
               <van-index-anchor index="V" />
               <van-index-anchor index="W" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('w'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="X" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('x'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="Y" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('y'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
               <van-index-anchor index="Z" />
            <van-cell v-for="(item) in cityList.filter((item)=> item.short.startsWith('z'))"
               :key="item.label" :title="item.label" @click="queryCity(item.label)"/>
        </van-index-bar>
    </div>
</template>

<script>
import { cityApi, popularCityApi } from '@/api/area.js'
// import { mapActions } from 'vuex'
export default {
  name: 'CityPage',

  components: {

  },
  data () {
    return {
      cityList: [],
      cityId: '',
      cityName: '',
      popularCity: [],
      whileCity: ['广州', '北京', '深圳', '上海']
    }
  },
  async created () {
    const res = await cityApi()
    this.cityList = res.body
    const res2 = await popularCityApi()
    this.popularCity = res2.body
  },
  // methods: {
  //   ...mapActions(['getCityId']),
  //   async queryCity (name) {
  //     if (!this.whileCity.includes(name)) {
  //       return this.$toast('该城市暂无房源')
  //     }
  //     this.getCityId({ name })
  //     this.$router.push({
  //       path: '/housing'
  //     })
  //   }
  // },
  mounted () {

  }
}
</script>

<style scoped>
/* .title {
    display: flex;
} */
</style>
